<style scoped>
#projectDetailPage {
  min-width: 1100px;
}

.projectMenuItem {
  margin: 0 0 10px 0;
}

.projectMenuItemTitle {
  display: inline-block;
  color: #2d8cf099;
}

.ivu-card-body {
  display: flex;
  flex-flow: column;
  flex: 1;
}

.flex1 {
  display: flex;
  flex-flow: column;
  flex: 1;
}

.projectDescriptionContent {
  overflow-y: auto;
  padding: 10px 5px;
  word-break: break-word;
}

.statistics {
  /* width: 40%; */
  /*height: -webkit-fill-available;*/
  display: inline-block;
}

.statistics p {
  margin-top: 5px;
}

.showCount {
  font-size: 30px;
  vertical-align: middle;
  margin-left: 15px;
}

.changeEditColor:hover {
  background-color: #2db7f5;
  color: white;
}

.changeRemoveColor:hover {
  background-color: #ed4014;
  color: white;
}

.changeInviteColor:hover {
  background-color: #19be6b;
  color: white;
}

.enterWorkspaceColor:hover {
  background-color: #0b83e1;
  color: white;
  /*box-shadow:  0 3.2px 7.2px 0 rgb(0 0 0 / 13%), 0 0.6px 1.8px 0 rgb(0 0 0 / 11%);*/
}

.overEllipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.subProjectDes {
  text-indent: 2em;
  height: 150px;
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
  overflow: hidden;
  white-space: pre-line;
}

.subProjectExtraP {
  display: flex;
  flex-flow: row;
}

.subProjectExtraSpan {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.subProjectCard .ivu-card-extra {
  top: 10px;
}

.demo-upload-list {
  display: inline-block;
  width: 60px;
  height: 60px;
  text-align: center;
  line-height: 60px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-right: 4px;
}

.demo-upload-list img {
  width: 100%;
  height: 100%;
}

.demo-upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}

.demo-upload-list:hover .demo-upload-list-cover {
  display: block;
}

.demo-upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

.uploadAvatar {
  position: relative;
  width: 58px;
  height: 58px;
  top: 0;
  left: 0;
  outline: none;
  background-color: transparent;
  opacity: 0;
}

.uploadBox {
  display: inline-block;
  width: 58px;
  height: 58px;
  line-height: 58px;
  border-width: 0.75px;
  border-style: dashed;
  border-color: lightslategray;
}

.inline_style {
  display: flex;
}

.fileBtn {
  margin: 0px 3px;
}

.fileBtnHoverBlue:hover {
  background-color: #2db7f5;
  color: white;
}

.fileBtnHoverYellow:hover {
  background-color: #f4a942;
  color: white;
}
.ivu-card-body {
  display: inherit;
}

.btnHoverRed:hover {
  background-color: #ed4014;
  color: white;
}

.project_title {
  font-size: 1.5rem;
  color: rgba(214, 109, 0, 0.82);
  display: contents;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.box {
  border: 1px solid red;
  position: relative;
  width: 1200px;
  height: 680px;
  overflow: hidden;
}

#projectImg {
  position: absolute;
  height: 100%;
  width: auto;
  cursor: move;
}

.tempMark_changeSize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
}
.tempMark_changeSize:hover {
  cursor: se-resize;
}

.tempMark_title {
  position: absolute;
  left: 0;
  top: 0;
  width: auto;
  max-width: 150px;
  overflow: hidden;
  height: 22px;
  background-color: rgba(241, 186, 32, 0.527);
}
.tempMarkTag >>> .ivu-tag-text {
  max-width: 40px;
  overflow: hidden;
}

@media screen and (min-width: 1300px) {
  .title_mw {
    max-width: 600px;
  }
}

@media screen and (max-width: 1299px) {
  .title_mw {
    max-width: 350px;
  }
}
</style>
<template>
  <div id="projectDetailPage" v-cloak>
    <template>
      <div :style="{ height: contentPageCSS + 'px' }" style="margin-top: 0px">
        <div span="2" style="height: inherit; width: 90px; position: absolute">
          <i-menu
            :active-name="activeMenu"
            @on-select="changeMenuItem"
            style="height: inherit; width: fit-content; z-index: 98"
          >
            <menu-item
              name="info"
              class="projectMenuItem"
              style="padding: 14px"
            >
              <Icon
                type="ios-information-circle"
                title="Information"
                size="35"
                style="margin: 0 3px"
              ></Icon>
            </menu-item>
            <menu-item
              name="task"
              class="projectMenuItem"
              style="padding: 14px"
            >
              <Icon
                type="md-calendar"
                title="Tasks"
                size="35"
                style="margin: 0 3px"
              ></Icon>
            </menu-item>
          </i-menu>
        </div>

        <div
          style="margin-left: 70px; height: inherit; min-height: fit-content"
        >
          <div
            v-show="activeMenu == 'info'"
            :style="{ height: contentPageCSS + 'px' }"
          >
            <div style="background: #eee; padding: 10px">
              <Card
                :bordered="false"
                dis-hover
                style="flex-flow: column; min-height: fit-content"
                v-if="getWorkFinished"
              >
                <div slot="title">
                  <!--                                <h1 slot="title" class="projectMenuItemTitle">Introduction</h1>-->
                  <div
                    style="
                      margin-left: 10px;
                      top: 15px;
                      position: absolute;
                      left: 20px;
                    "
                  >
                    <span
                      ><Icon
                        type="ios-arrow-back"
                        size="28"
                        @click="back2List()"
                        style="
                          cursor: pointer;
                          color: #2d8cf0;
                          vertical-align: sub;
                        "
                    /></span>
                    <strong style="font-size: 1.5rem; margin-left: 10px"
                      >作品介绍</strong
                    >
                    <Divider type="vertical"></Divider>
                    <!--                    <strong style="font-size:1rem;">Introduction</strong>-->
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <span class="project_title title_mw">{{
                      projectInfo.workName
                    }}</span>
                  </div>
                </div>
                <div slot="extra">
                  <div>
                    <Poptip
                      trigger="hover"
                      content="Edit project information"
                      placement="left"
                      v-if="userInfo.role == 'admin'"
                    >
                      <i-button
                        style="margin: 0 5px"
                        class="changeEditColor"
                        @click="editModelShow()"
                      >
                        <Icon type="ios-create" :size="20"></Icon>
                      </i-button>
                    </Poptip>
                    <Poptip
                      trigger="hover"
                      content="Remove project"
                      placement="left"
                      v-if="userInfo.role == 'admin'"
                    >
                      <i-button
                        style="margin: 0 5px"
                        class="changeRemoveColor"
                        @click="deleteProjectShow()"
                      >
                        <Icon type="md-close" :size="20"></Icon>
                      </i-button>
                    </Poptip>
                  </div>
                </div>
                <div class="flex1" style="min-height: fit-content">
                  <Row
                    :gutter="25"
                    style="flex: 1; display: flex; flex-flow: initial"
                  >
                    <i-col span="16" style="display: flex; flex-flow: column">
                      <div
                        style="
                          border: solid 1px #eeeeee;
                          flex: 1;
                          padding: 20px;
                          flex-flow: column;
                          display: flex;
                        "
                      >
                        <Row :gutter="15" style="height: 200px; display: flex">
                          <i-col span="8">
                            <div style="width: 200px; height: 200px">
                              <img
                                :src="dataSever + projectInfo.thumbnail"
                                style="height: inherit; width: inherit"
                                v-if="
                                  projectInfo.thumbnail != null &&
                                  projectInfo.type == 'Image'
                                "
                              />
                              <img
                                :src="dataSever + projectInfo.url"
                                style="height: inherit; width: inherit"
                                v-else-if="
                                  projectInfo.url != null &&
                                  projectInfo.type == 'Image'
                                "
                              />
                              <img
                                :src="dataSever + projectInfo.thumbnail"
                                style="height: inherit; width: inherit"
                                v-else-if="
                                  projectInfo.thumbnail != null &&
                                  projectInfo.type == 'Video'
                                "
                              />
                              <avatar
                                :username="projectInfo.workName"
                                :size="180"
                                :title="projectInfo.workName"
                                :rounded="false"
                                v-else
                              ></avatar>
                            </div>
                          </i-col>
                          <i-col span="16" style="align-self: flex-end">
                            <div style="text-align: center">
                              <div class="statistics">
                                <div style="text-align: left; padding: 5px">
                                  <p>
                                    <strong>作品名: </strong
                                    ><span
                                      id="projectTitle"
                                      th:text="${projectInfo.workName}"
                                      >{{ projectInfo.workName }}</span
                                    >
                                  </p>
                                  <p>
                                    <strong>作者: </strong
                                    ><span
                                      id="projectPrivacy"
                                      th:text="${projectInfo.privacy}"
                                      >{{ projectInfo.uploaderName }}</span
                                    >
                                    <span
                                      style="margin-left: 10px; cursor: pointer"
                                      title="Modify the permission of participants"
                                      v-if="userRole == 'manager'"
                                      @click="modifyPermission"
                                    >
                                      <Icon
                                        type="md-cog"
                                        size="16"
                                        color="grey"
                                      ></Icon>
                                    </span>
                                  </p>
                                  <p>
                                    <strong>作品类型: </strong
                                    ><span
                                      id="projectCategory"
                                      th:text="${projectInfo.category}"
                                      >{{ projectInfo.type }}</span
                                    >
                                  </p>
                                  <p>
                                    <strong>作品大小: </strong
                                    ><span
                                      id="projectTag"
                                      class="overEllipsis"
                                      style="
                                        display: inline-block;
                                        vertical-align: top;
                                        width: 230px;
                                      "
                                      th:text="${projectInfo.tag}"
                                      th:attr="title=${projectInfo.tag}"
                                      >{{ projectInfo.fileSize }}</span
                                    >
                                  </p>
                                  <p>
                                    <strong>提交时间: </strong>
                                    {{ projectInfo.createTime.split("T")[0] }}
                                  </p>
                                </div>
                              </div>
                              <!-- <div
                                style="
                                  position: absolute;
                                  right: 5px;
                                  bottom: 5px;
                                "
                              >
                                <div>
                                  <Icon type="md-thumbs-up" size="30"></Icon>
                                  <span class="showCount">{{
                                    projectInfo.children.length
                                  }}</span>
                                </div>
                                <div>
                                  <Icon type="md-eye" size="30"></Icon>
                                  <span class="showCount">{{
                                    projectInfo.members.length
                                  }}</span>
                                </div>
                              </div> -->
                            </div>
                          </i-col>
                        </Row>
                        <div class="flex1" style="margin-top: 10px">
                          <div
                            style="
                              flex: 1;
                              padding: 5px;
                              min-height: 100px;
                              border: #e8eaec 0.1px dashed;
                            "
                          >
                            <h3>作品详细介绍:</h3>
                            <div
                              class="projectDescriptionContent"
                              :style="{ height: contentPageCSS - 393 + 'px' }"
                            >
                              <vue-scroll :ops="scrollOps">
                                <div
                                  id="projectDescription"
                                  style="white-space: pre-line"
                                  th:text="${projectInfo.description}"
                                >
                                  {{ projectInfo.description }}
                                </div>
                              </vue-scroll>
                            </div>
                          </div>
                        </div>
                      </div>
                    </i-col>
                    <i-col span="8" style="display: flex; flex-flow: column">
                      <div style="border: solid 1px #eeeeee" class="flex1">
                        <Card :bordered="false" dis-hover>
                          <div slot="title">
                            <h2>作品评价</h2>
                          </div>
                          <div
                            :style="{ height: contentPageCSS - 200 + 'px' }"
                            style="overflow-y: auto"
                          >
                            <vue-scroll
                              :ops="scrollOps"
                              v-if="participants.length > 0"
                            >
                              <Card
                                v-for="item in participants"
                                :key="item.cid"
                                style="
                                  margin-top: 7px;
                                  cursor: pointer;
                                  height: 105px;
                                "
                              >
                                <div
                                  style="
                                    width: 50px;
                                    height: 50px;
                                    margin-top: 10px;
                                  "
                                >
                                  <img
                                    :src="item.picture"
                                    style="height: inherit; width: inherit"
                                    v-if="
                                      item.picture != '' &&
                                      item.picture != undefined
                                    "
                                  />
                                  <avatar
                                    :username="item.userName"
                                    :size="50"
                                    :title="item.userName"
                                    v-else
                                  ></avatar>
                                </div>
                                <div
                                  style="
                                    position: absolute;
                                    left: 80px;
                                    top: 5px;
                                  "
                                >
                                  <div style="margin-top: 10px">
                                    <h4 style="width: 150px">
                                      {{ item.userName }}
                                    </h4>
                                  </div>
                                  <div title="Comment" style="margin-top: 7px">
                                    <h3
                                      class="overEllipsis"
                                      style="width: 450px; font-weight: 800"
                                    >
                                      {{ item.content }}
                                    </h3>
                                  </div>
                                  <div title="Time" style="margin-top: 7px">
                                    <h5
                                      class="overEllipsis"
                                      style="width: 150px; color: #c5c8ce"
                                    >
                                      {{ item.createDate }}
                                    </h5>
                                  </div>
                                </div>
                                <div
                                  style="
                                    position: absolute;
                                    left: 240px;
                                    bottom: 5px;
                                  "
                                >
                                  <Button
                                    shape="circle"
                                    icon="md-thumbs-up"
                                    title="点赞"
                                    style="border: transparent; color: #c5c8ce"
                                    >{{ item.likes.length }}</Button
                                  >
                                  <Button
                                    shape="circle"
                                    icon="ios-chatboxes"
                                    title="评论"
                                    style="border: transparent; color: #c5c8ce"
                                    >{{ item.comments.length }}</Button
                                  >
                                </div>
                              </Card>
                            </vue-scroll>
                            <Card
                              :bordered="false"
                              style="min-height: 350px; margin-top: 23%"
                              dis-hover
                              v-else
                            >
                              <div
                                style="display: flex; justify-content: center"
                              >
                                <Icon
                                  type="md-alert"
                                  size="40"
                                  color="gray"
                                ></Icon>
                              </div>
                              <br />
                              <div
                                style="display: flex; justify-content: center"
                              >
                                <h2 style="text-align: center; width: 50%">
                                  没有更多的评论
                                </h2>
                              </div>
                              <br />
                              <div
                                style="display: flex; justify-content: center"
                              >
                                <h4
                                  style="
                                    text-align: center;
                                    width: 80%;
                                    color: lightblue;
                                  "
                                >
                                  你可以通过左侧菜单栏前往作品展示界面查看作品，
                                  <br />并发表你的观点和看法。
                                </h4>
                              </div>
                            </Card>
                          </div>
                        </Card>
                      </div>
                    </i-col>
                  </Row>
                </div>
              </Card>
            </div>
          </div>

          <div
            v-show="activeMenu == 'task'"
            style="height: inherit; min-height: fit-content"
          >
            <div style="background: #eee; padding: 10px">
              <Card
                :bordered="false"
                dis-hover
                style="min-height: 565px; min-height: fit-content"
              >
                <!--                            <h1 slot="title" class="projectMenuItemTitle">Task assignment</h1>-->
                <div slot="title">
                  <div
                    style="
                      margin-left: 10px;
                      top: 15px;
                      position: absolute;
                      left: 20px;
                    "
                  >
                    <span
                      ><Icon
                        type="ios-arrow-back"
                        size="28"
                        @click="back2List()"
                        style="
                          cursor: pointer;
                          color: #2d8cf0;
                          vertical-align: sub;
                        "
                    /></span>
                    <strong style="font-size: 1.5rem; margin-left: 10px"
                      >作品展示</strong
                    >
                    <Divider type="vertical"></Divider>
                    <!--                    <strong style="font-size:1rem;">Task assignment</strong>-->
                  </div>
                  <div
                    style="
                      display: flex;
                      align-items: center;
                      justify-content: center;
                    "
                  >
                    <span class="project_title title_mw">{{
                      projectInfo.name
                    }}</span>
                  </div>
                </div>
                <div slot="extra">
                  <div style="margin-right: 20px">
                    <ButtonGroup style="margin-right: 7px">
                      <Button icon="md-eye">Watch</Button>
                      <Button>{{ projectInfo.viewNum }}</Button>
                    </ButtonGroup>
                    <ButtonGroup>
                      <Button icon="md-star" @click="starWork(projectInfo.id)"
                        >Star</Button
                      >
                      <Button v-if="getWorkFinished">{{
                        projectInfo.likes.length
                      }}</Button>
                    </ButtonGroup>
                  </div>
                </div>
                <div class="flex1" style="min-height: fit-content">
                  <Row
                    :gutter="25"
                    style="flex: 1; display: flex; flex-flow: initial"
                  >
                    <!-- 图像作品 -->
                    <i-col
                      span="16"
                      style="display: flex; flex-flow: column"
                      v-if="projectInfo.type == 'Image'"
                    >
                      <div
                        style="
                          border: solid 2px #eeeeee;
                          flex: 1;
                          padding: 20px;
                          flex-flow: column;
                          display: flex;
                        "
                        class="box"
                        id="bigimg"
                        @mousewheel="bagimg($event)"
                        @mouseleave="recoverScroll"
                      >
                        <img
                          :src="dataSever + projectInfo.url"
                          id="projectImg"
                          border="0"
                          @mousedown="selectImg()"
                        />
                        <!-- 标注框 -->
                        <div
                          v-for="(item, index) in boxArry"
                          :key="index"
                          :ref="'biaozhu' + index"
                          :style="{
                            width: item.width + 'px',
                            height: item.height + 'px',
                            position: 'absolute',
                            left: item.left,
                            top: item.top,
                            background: hexToRgba(item.color),
                            border: 'none',
                            overflow: 'hidden',
                          }"
                        >
                          <div class="tempMark_title" :title="item.title">
                            {{ item.title }}
                          </div>
                        </div>
                        <!-- 功能标注框 -->
                        <div
                          v-for="(item, index) in tempBoxArry"
                          :key="index"
                          :ref="'tempMark' + index"
                          :id="'tempMark' + index"
                          class="tempMark"
                          :style="{
                            width: item.width + 'px',
                            height: item.height + 'px',
                            position: 'absolute',
                            left: item.left,
                            top: item.top,
                            background: hexToRgba(item.color),
                            border: 'none',
                            cursor: 'move',
                          }"
                          @mousedown.stop="selectTempBox(item, index)"
                        >
                          <div class="tempMark_title" :title="item.title">
                            {{ item.title }}
                          </div>
                          <div
                            class="tempMark_changeSize"
                            :id="'tempMark_changeSize' + index"
                            tabindex="0"
                            style="cursor: pointer; z-index: 999"
                            @mousedown="tempMarkChange"
                            @mouseup="tempMarkChange_mouseup"
                          ></div>
                        </div>
                      </div>
                    </i-col>
                    <!-- 视频作品 -->
                    <i-col
                      span="16"
                      style="display: flex; flex-flow: column"
                      v-if="projectInfo.type == 'Video' && getWorkVideoFinished"
                    >
                      <div
                        style="
                          border: solid 2px #eeeeee;
                          flex: 1;
                          padding: 20px;
                          flex-flow: column;
                          display: flex;
                        "
                        id="bigvideo"
                      >
                        <video-player
                          class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          :options="playerOptions"
                          style="height: 100%; width: 100%"
                        >
                        </video-player>
                      </div>
                    </i-col>
                    <!-- 模型作品 -->
                    <i-col
                      span="16"
                      style="display: flex; flex-flow: column"
                      v-if="projectInfo.type == 'Model'"
                    >
                      <model-show :projectInfo="projectInfo" />
                    </i-col>
                    <i-col span="8" style="display: flex; flex-flow: column">
                      <div style="border: solid 1px #eeeeee" class="flex1">
                        <Card
                          :bordered="false"
                          dis-hover
                          v-if="!commentModalShow"
                        >
                          <div
                            slot="title"
                            style="
                              display: flex;
                              justify-content: space-between;
                              align-items: center;
                            "
                          >
                            <h2>作品评价</h2>
                            <Select
                              v-model="selectedTag"
                              style="width: 150px"
                              @on-change="changeCommitByTag"
                            >
                              <Option
                                v-for="(item, index) in tagTemplateList"
                                :value="item.value"
                                :key="index"
                                >{{ item.label }}</Option
                              >
                            </Select>
                          </div>
                          <div
                            :style="{ height: contentPageCSS - 200 + 'px' }"
                            style="overflow-y: hidden; overflow-x: hidden"
                          >
                            <vue-scroll
                              :ops="scrollOps"
                              :style="{ height: contentPageCSS - 330 + 'px' }"
                              v-if="participants.length > 0"
                            >
                              <Card
                                v-for="item in participants"
                                :key="item.id"
                                style="
                                  margin-top: 7px;
                                  cursor: pointer;
                                  height: 105px;
                                  overflow-y: hidden;
                                  overflow-x: hidden;
                                "
                              >
                                <div
                                  style="
                                    width: 50px;
                                    height: 50px;
                                    margin-top: 10px;
                                  "
                                  @click="showComment(item)"
                                >
                                  <img
                                    :src="item.picture"
                                    style="height: inherit; width: inherit"
                                    v-if="
                                      item.picture != '' &&
                                      item.picture != undefined
                                    "
                                  />
                                  <avatar
                                    :username="item.userName"
                                    :size="50"
                                    :title="item.userName"
                                    v-else
                                  ></avatar>
                                </div>
                                <div
                                  style="
                                    position: absolute;
                                    left: 80px;
                                    top: 5px;
                                  "
                                  @click="showComment(item)"
                                >
                                  <div
                                    style="
                                      margin-top: 10px;
                                      display: flex;
                                      align-items: center;
                                    "
                                  >
                                    <h4>
                                      {{ item.userName }}
                                    </h4>
                                    <Tag
                                      :color="matchColorByType(item.type)"
                                      style="margin-left: 15px"
                                      >{{ item.type }}</Tag
                                    >
                                  </div>
                                  <div
                                    :title="item.content"
                                    style="margin-top: 7px"
                                  >
                                    <h3
                                      class="overEllipsis"
                                      style="width: 380px; font-weight: 800"
                                    >
                                      {{ item.content }}
                                    </h3>
                                  </div>
                                  <div title="Time" style="margin-top: 7px">
                                    <h5
                                      class="overEllipsis"
                                      style="width: 150px; color: #c5c8ce"
                                    >
                                      {{ item.createDate | filterTimeStyle }}
                                    </h5>
                                  </div>
                                </div>
                                <div
                                  style="
                                    position: absolute;
                                    left: 240px;
                                    bottom: 2px;
                                  "
                                >
                                  <Button
                                    shape="circle"
                                    icon="md-thumbs-up"
                                    title="点赞"
                                    @click="commentLiked(item.id, item.likes)"
                                    style="border: transparent; color: #3399ff"
                                    v-if="
                                      item.likes
                                        .toString()
                                        .indexOf(userInfo.userId) != -1
                                    "
                                    >{{ item.likes.length }}</Button
                                  >
                                  <Button
                                    shape="circle"
                                    icon="md-thumbs-up"
                                    title="点赞"
                                    @click="commentLiked(item.id, item.likes)"
                                    style="border: transparent; color: #c5c8ce"
                                    v-else
                                    >{{ item.likes.length }}</Button
                                  >
                                  <Button
                                    shape="circle"
                                    icon="ios-chatboxes"
                                    title="评论"
                                    style="border: transparent; color: #c5c8ce"
                                    >{{ item.comments.length }}</Button
                                  >
                                </div>
                              </Card>
                            </vue-scroll>
                            <Card
                              :bordered="false"
                              :style="{ height: contentPageCSS - 330 + 'px' }"
                              dis-hover
                              v-else
                            >
                              <div
                                style="
                                  display: flex;
                                  justify-content: center;
                                  margin-top: 23%;
                                "
                              >
                                <Icon
                                  type="md-alert"
                                  size="40"
                                  color="gray"
                                ></Icon>
                              </div>
                              <br />
                              <div
                                style="display: flex; justify-content: center"
                              >
                                <h2 style="text-align: center; width: 50%">
                                  没有更多的评论
                                </h2>
                              </div>
                              <br />
                              <div
                                style="display: flex; justify-content: center"
                              >
                                <h4
                                  style="
                                    text-align: center;
                                    width: 80%;
                                    color: lightblue;
                                  "
                                >
                                  你可以通过正下方评论按钮，留下你的观点和看法。
                                </h4>
                              </div>
                            </Card>
                            <div
                              class="commitComment"
                              style="border: solid 1px #eeeeee; height: 130px"
                            >
                              <Row>
                                <i-col span="5">
                                  <div
                                    style="margin-top: 35px; margin-left: 15%"
                                  >
                                    <img
                                      :src="userInfo.picture"
                                      style="height: inherit; width: inherit"
                                      v-if="
                                        userInfo.picture != '' &&
                                        userInfo.picture != undefined
                                      "
                                    />
                                    <avatar
                                      :username="userInfo.name"
                                      :size="60"
                                      :title="userInfo.name"
                                      v-else
                                    ></avatar>
                                  </div>
                                </i-col>
                                <i-col span="14">
                                  <div>
                                    <div
                                      style="
                                        margin-top: 7px;
                                        width: 100%;
                                        height: 39px;
                                        overflow: hidden;
                                        white-space: nowrap;
                                      "
                                    >
                                      <Select
                                        v-model="commentType"
                                        title="评论类型选择"
                                        style="width: 80px; align-items: center"
                                        v-if="replyTarget == ''"
                                      >
                                        <Option
                                          v-for="(
                                            item, index
                                          ) in tagTemplateList"
                                          :value="item.value"
                                          :key="index"
                                          >{{ item.label }}</Option
                                        >
                                      </Select>
                                      <Poptip
                                        width="290"
                                        v-show="projectInfo.type == 'Image' && replyTarget == ''"
                                      >
                                        <Button icon="md-add">标注</Button>
                                        <div
                                          slot="content"
                                          style="
                                            display: flex;
                                            justify-content: space-around;
                                            align-items: center;
                                          "
                                        >
                                          <el-color-picker
                                            size="medium"
                                            title="选择标注框颜色"
                                            v-model="addTempBox.color"
                                          ></el-color-picker>
                                          <Input
                                            v-model="addTempBox.title"
                                            placeholder="标注"
                                            title="标注框名称"
                                            style="width: 120px"
                                            @on-focus="clearSelectTempBox"
                                            @on-enter="addMarkBox"
                                          ></Input>
                                          <Button
                                            type="primary"
                                            @click="addMarkBox()"
                                            style="
                                              width: 60px;
                                              margin-left: 6px;
                                            "
                                            >开始</Button
                                          >
                                        </div>
                                      </Poptip>
                                      <Tag
                                        type="dot"
                                        class="tempMarkTag"
                                        v-for="(item, index) in tempBoxArry"
                                        :key="index"
                                        :title="item.title"
                                        closable
                                        @on-close="handleCloseMarkTag(index)"
                                        style="margin-bottom: 2px"
                                        :color="item.color"
                                        >{{ item.title }}</Tag
                                      >
                                    </div>
                                    <Input
                                      v-model="commentValue"
                                      ref="commentValueBox"
                                      @on-focus="clearSelectTempBox"
                                      type="textarea"
                                      :rows="3"
                                      placeholder="发一条评论..."
                                      style="width: 100%"
                                    />
                                  </div>
                                </i-col>
                                <i-col span="4">
                                  <Button
                                    type="primary"
                                    style="
                                      height: 74px;
                                      margin-left: 10px;
                                      margin-top: 45px;
                                      font-size: 16px;
                                    "
                                    @click="commitComment()"
                                    >发表<br />评论</Button
                                  >
                                </i-col>
                              </Row>
                            </div>
                          </div>
                        </Card>
                        <Card :bordered="false" dis-hover v-else>
                          <div slot="title">
                            <span
                              ><Icon
                                type="ios-arrow-back"
                                size="26"
                                @click="commentModalClose()"
                                style="
                                  cursor: pointer;
                                  color: #2d8cf0;
                                  vertical-align: sub;
                                "
                            /></span>
                            <span
                              style="
                                font-size: 20px;
                                font-weight: 600;
                                margin-left: 10px;
                              "
                              >评论详情</span
                            >
                          </div>
                          <vue-scroll
                            :ops="scrollOps"
                            :style="{ height: contentPageCSS - 285 + 'px' }"
                          >
                            <div
                              style="
                                display: flex;
                                flex-wrap: wrap;
                                margin-left: 5px;
                              "
                            >
                              <div
                                style="
                                  width: 50px;
                                  height: 50px;
                                  margin-top: 20px;
                                "
                                v-if="commentModalShow"
                              >
                                <img
                                  :src="selectCommentInfo.picture"
                                  style="height: inherit; width: inherit"
                                  v-if="
                                    selectCommentInfo.picture != '' &&
                                    selectCommentInfo.picture != undefined
                                  "
                                />
                                <avatar
                                  :username="selectCommentInfo.userName"
                                  :size="50"
                                  :title="selectCommentInfo.userName"
                                  v-else
                                ></avatar>
                              </div>
                              <div style="margin-left: 20px; width: 80%">
                                <div style="margin-top: 10px">
                                  <h4 style="width: 30%">
                                    {{ selectCommentInfo.userName }}
                                  </h4>
                                </div>
                                <div title="Comment" style="margin-top: 7px">
                                  <h3 style="width: 90%; font-weight: 800">
                                    {{ selectCommentInfo.content }}
                                  </h3>
                                </div>
                                <span
                                  title="Time"
                                  style="
                                    margin-top: 17px;
                                    width: 40%;
                                    height: 30px;
                                  "
                                >
                                  <span
                                    class="overEllipsis"
                                    style="
                                      width: 40%;
                                      color: #c5c8ce;
                                      font-size: 14px;
                                      line-height: 30px;
                                    "
                                    >{{
                                      selectCommentInfo.createDate
                                        | filterTimeStyle
                                    }}</span
                                  >
                                </span>
                              </div>
                              <div
                                v-if="
                                  selectCommentInfo.comments &&
                                  selectCommentInfo.comments.length > 0
                                "
                              >
                                <div
                                  v-for="(
                                    item, index
                                  ) in selectCommentInfo.comments"
                                  :key="index"
                                >
                                  <Divider />
                                  <div
                                    style="
                                      display: flex;
                                      flex-wrap: wrap;
                                      margin-left: 40px;
                                    "
                                  >
                                    <div
                                      style="
                                        width: 100%;
                                        visibility: hidden;
                                        font-size: 6px;
                                        height: 0.5em; ;
                                      "
                                    >
                                      123456789123123123123123123123123123123123123
                                    </div>
                                    <div
                                      style="
                                        width: 50px;
                                        height: 50px;
                                        margin-top: 15px;
                                      "
                                      v-if="commentModalShow"
                                    >
                                      <img
                                        :src="item.picture"
                                        style="height: inherit; width: inherit"
                                        v-if="
                                          item.picture != '' &&
                                          item.picture != undefined
                                        "
                                      />
                                      <avatar
                                        :username="item.userName"
                                        :size="50"
                                        :title="item.userName"
                                        v-else
                                      ></avatar>
                                    </div>
                                    <div style="margin-left: 5%; width: 80%">
                                      <div>
                                        <h4 style="width: 30%">
                                          {{ item.userName }}
                                        </h4>
                                      </div>
                                      <div
                                        title="Comment"
                                        style="margin-top: 7px"
                                      >
                                        <h3
                                          style="width: 90%; font-weight: 800"
                                        >
                                          {{ item.content }}
                                        </h3>
                                      </div>
                                      <span
                                        title="Time"
                                        style="
                                          margin-top: 17px;
                                          width: 40%;
                                          height: 30px;
                                        "
                                      >
                                        <span
                                          class="overEllipsis"
                                          style="
                                            width: 40%;
                                            color: #c5c8ce;
                                            font-size: 14px;
                                            line-height: 30px;
                                          "
                                          >{{
                                            item.createDate | filterTimeStyle
                                          }}</span
                                        >
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </vue-scroll>
                          <div style="display: inline-block; width: 100%">
                            <Divider />
                            <i-button
                              style="float: right"
                              @click="commentModalClose()"
                              >关闭</i-button
                            >
                            <i-button
                              type="primary"
                              style="float: right; margin-right: 15px"
                              @click="replyComment()"
                              >评论</i-button
                            >
                            <i-button
                              type="error"
                              style="float: left; margin-left: 25px"
                              @click="deleteComment()"
                              v-if="
                                userInfo.role == 'admin' ||
                                userInfo.userId == selectCommentInfo.uid
                              "
                              >删除</i-button
                            >
                          </div>
                        </Card>
                      </div>
                    </i-col>
                  </Row>
                </div>
              </Card>
            </div>
          </div>
          <Modal
            v-model="editProjectModal"
            title="Edit project information"
            :mask-closable="false"
            width="900"
          >
            <div>
              <i-form
                ref="projectEditForm"
                :model="projectEditForm"
                :label-width="100"
              >
                <FormItem prop="type" label="作品类别" :label-width="100">
                  <RadioGroup v-model="projectEditForm.type" style="width: 80%">
                    <Radio label="Image" disabled>图像类</Radio>
                    <Radio label="Video" disabled>视频类</Radio>
                    <Radio label="Website" disabled>网站类</Radio>
                    <Radio label="music" disabled>音乐类</Radio>
                  </RadioGroup>
                </FormItem>
                <FormItem label="作品名称" prop="workName">
                  <i-input
                    v-model="projectEditForm.workName"
                    placeholder="Enter something..."
                  ></i-input>
                </FormItem>
                <FormItem label="作品描述" prop="description">
                  <i-input v-model="projectEditForm.description"></i-input>
                </FormItem>
                <FormItem label="作者" prop="uploaderName">
                  <i-input v-model="projectEditForm.uploaderName"></i-input>
                </FormItem>
              </i-form>
            </div>
            <div slot="footer" style="display: inline-block">
              <i-button
                type="primary"
                @click="validateEditProject('projectEditForm')"
                style="float: right"
                >OK
              </i-button>
              <i-button
                @click="closeEditModel()"
                style="float: right; margin-right: 15px"
                >Cancel</i-button
              >
            </div>
          </Modal>
          <Modal
            v-model="removeProjectModal"
            title="Delete warning "
            @on-ok="deleteProject"
            ok-text="Ok"
            cancel-text="Cancel"
          >
            <p>Do you sure to delete this project?</p>
          </Modal>
        </div>
      </div>
    </template>
    <div th:replace="navigation::commonFooter"></div>
  </div>
</template>
<script>
import Avatar from "vue-avatar";
import { videoPlayer } from "vue-video-player";
import "video.js/dist/video-js.css";
import { get, post, del, put } from "@/axios";
import ModelShow from "./modelShow.vue";
export default {
  components: {
    Avatar,
    videoPlayer,
    ModelShow,
  },
  data() {
    return {
      contentPageCSS: 0,
      scrollOps: {
        bar: {
          background: "#808695",
        },
      },
      tokenStr: "",
      activeMenu: "overview",
      //user
      userInfo: {},
      userRole: "visitor",
      creatorInfo: {},
      participants: [],
      addTempBox: {
        left: "562px",
        top: "360px",
        width: 250,
        height: 150,
        flag: false,
        title: "标注",
        color: "#3399ff",
      },
      projectInfo: {},
      editProjectModal: false,
      projectEditForm: {
        description: "",
        name: "",
        privacy: "",
        editTags: "",
      },
      pictureUrl: "",
      inputTag: "",
      visible: false,
      removeProjectModal: false,
      commentValue: "",
      commentType: "all",
      //图片缩放
      params: {
        zoomVal: 1,
        left: 0,
        top: 0,
        currentX: 0,
        currentY: 0,
        flag: false,
      },
      boxArry: [], //标注框
      tempBoxArry: [], //功能标注框
      selectCommentInfo: {},
      commentModalShow: false,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "video/mp4", // 类型
            src: "", // url地址
          },
        ],
        poster: "", // 封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true, // 是否显示全屏按钮
        },
      },
      replyTarget: "",
      getWorkFinished: false,
      getWorkVideoFinished: false,
      selectedTag: "all",
      colorList: ["blue", "green", "red", "yellow"],
      tagTemplateList: [
        {
          value: "all",
          label: "所有",
        },
      ],
      dataSever: "",
    };
  },
  created() {
    this.userEnter();
    this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
  },
  mounted() {
    this.resizeContent();
    this.dataSever = this.$store.getters.dataSever;
    this.changeMenuByUrl();
    if (this.projectInfo.type == "Image") {
      this.startDrag(
        document.getElementById("projectImg"),
        document.getElementById("projectImg")
      ); //图片拖动
    }
  },
  watch:{
    commentValue(newVal,oldVal){
      if(newVal.indexOf('评论 @') == -1 && oldVal.indexOf('评论 @') != -1){
        this.replyTarget = "";
      }
    }
  },
  methods: {
    changeMenuByUrl() {
      var content = this.getURLParameter("content");
      if (content != null) {
        var array = ["info", "task"];
        if (array.includes(content)) {
          this.activeMenu = content;
        }
      }
    },
    getURLParameter(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return unescape(r[2]);
      }
      return null;
    },
    userEnter() {
      if (!this.$store.getters.userState) {
        this.$router.push({ name: "login" });
      } else {
        this.getWorkInfo();
        this.getCommentInfo();
      }
    },
    changeCommitByTag(value) {
      this.commentType = value;
      if (value == "all") {
        this.getCommentInfo();
      } else {
        this.getCommentInfoByType(value);
      }
    },
    async getWorkInfo() {
      let workId = window.location.href
        .split("/projectInfo/")[1]
        .split("?content")[0];
      try {
        let res = await get("/visualResourceLibrary/work/" + workId);
        this.projectInfo = res.data.data;
        // console.log(this.projectInfo);
        let tagList;
        if(res.data.data.tags){
          tagList = res.data.data.tags.split(",");
        } else {
          tagList = [];
        }
        for (let i = 0; i < tagList.length; i++) {
          let tagItem = {};
          tagItem.label = tagList[i];
          tagItem.value = tagList[i];
          tagItem.color = this.colorList[i % 4];
          this.tagTemplateList.push(tagItem);
        }
        this.getWorkFinished = true;
        if (this.projectInfo.type == "Video") {
          this.playerOptions.sources[0].src =
            this.dataSever + this.projectInfo.url;
          // console.log(this.playerOptions.sources[0].src);
          this.getWorkVideoFinished = true;
        }
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    async getCommentInfo() {
      let workId = window.location.href
        .split("/projectInfo/")[1]
        .split("?content")[0];
      try {
        let res = await get("/visualResourceLibrary/ele/" + workId);
        // console.log(res);
        this.participants = [];
        this.participants = res.data.data;
        // this.getWorkFinished = true;
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    async getCommentInfoByType(type) {
      let workId = window.location.href
        .split("/projectInfo/")[1]
        .split("?content")[0];
      try {
        let res = await get(
          "/visualResourceLibrary/ele/" + workId + "/" + type
        );
        this.participants = [];
        this.participants = res.data.data;
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    matchColorByType(type) {
      for (let i = 0; i < this.tagTemplateList.length; i++) {
        if (this.tagTemplateList[i].value == type) {
          return this.tagTemplateList[i].color;
        }
      }
    },
    resizeContent() {
      if (window.innerHeight > 735) {
        this.contentPageCSS = window.innerHeight - 120;
      } else {
        this.contentPageCSS = 610;
      }
    },
    changeMenuItem(name) {
      this.activeMenu = name;
      window.history.replaceState(
        null,
        null,
        "/visualCoursePlatform/projectInfo/" +
          this.projectInfo.id +
          "?content=" +
          name
      );
      this.getCommentInfo();
      this.commentModalShow = false;
    },
    showComment(item) {
      // console.log(item);
      let location = item;
      if (this.projectInfo.type == "Image") {
        //图片定位
        this.imgLocationShow(0, 0, 1);
        this.imgLocationShow(location.top, location.left, location.zoomIn);
        this.params.top = location.top;
        this.params.left = location.left;
        this.params.zoomVal = location.zoomIn;

        //标注框
        this.tempBoxArry = [];
        this.boxArry = location.tags;
      }
      //评论详情框
      this.selectCommentInfo = location;
      this.commentModalShow = true;
    },
    commentModalClose() {
      this.commentModalShow = false;
      this.boxArry = [];
    },
    commentGetFocus() {
      this.$refs.commentValueBox.focus();
    },
    replyComment() {
      this.commentModalShow = false;
      // console.log(this.selectCommentInfo);
      this.commentValue = "评论 @" + this.selectCommentInfo.userName + ":";
      this.replyTarget = this.selectCommentInfo.id;
      // this.commentGetFocus();
    },
    async deleteComment() {
      // console.log(this.selectCommentInfo);
      try {
        let res = await del(
          "/visualResourceLibrary/ele/" + this.selectCommentInfo.id
        );
        // console.log(res);
        this.participants.splice(
          this.participants.indexOf(this.selectCommentInfo),
          1
        );
        this.$Message.success("修改成功");
        this.commentModalShow = false;
        // this.getWorkFinished = true;
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    addMarkBox() {
      let box = JSON.parse(JSON.stringify(this.addTempBox));
      this.tempBoxArry.push(box);
      this.addTempBox.title = "标注";
      this.addTempBox.color = "#3399ff";
    },
    hexToRgba(hex) {
      return (
        "rgba(" +
        parseInt("0x" + hex.slice(1, 3)) +
        "," +
        parseInt("0x" + hex.slice(3, 5)) +
        "," +
        parseInt("0x" + hex.slice(5, 7)) +
        "," +
        0.3 +
        ")"
      );
    },
    handleCloseMarkTag(index) {
      this.tempBoxArry.splice(index, 1);
    },
    deleteByKeyboard(item) {
      //删除
      let index = this.tempBoxArry.indexOf(item);
      this.tempBoxArry.splice(index, 1);
    },
    selectImg() {
      if (this.tempBoxArry.length > 0) {
        // 样式
        let boxList = document.getElementsByClassName("tempMark");
        for (let i = 0; i < boxList.length; i++) {
          boxList[i].style.border = "none";
        }
        let changePot = document.getElementsByClassName("tempMark_changeSize");
        for (let i = 0; i < changePot.length; i++) {
          changePot[i].style.backgroundColor = "transparent";
        }
      }
      // 关闭键盘监听
      document.onkeyup = null;
      // 拖动
      this.startDrag(
        document.getElementById("projectImg"),
        document.getElementById("projectImg")
      ); //图片拖动
    },
    selectTempBox(item, index) {
      //实现标注框的选中与拖拽
      // console.log(item);
      let that = this;
      // 样式
      // 离开
      let boxList = document.getElementsByClassName("tempMark");
      for (let i = 0; i < boxList.length; i++) {
        boxList[i].style.border = "none";
      }
      if (boxList.length > 0) {
        let changePotList = document.getElementsByClassName(
          "tempMark_changeSize"
        );
        for (let i = 0; i < changePotList.length; i++) {
          changePotList[i].style.backgroundColor = "transparent";
        }
      }
      // 激活
      let box = document.getElementById("tempMark" + index);
      box.style.border = "solid 2px red";
      let changePot = document.getElementById("tempMark_changeSize" + index);
      changePot.style.backgroundColor = "red";

      // 拖动
      this.startBoxDrag(box, box, index);

      // keyup.delete监听
      document.onkeyup = (e) => {
        if (e.code == "Backspace") {
          that.deleteByKeyboard(item);
        }
      };
    },
    clearSelectTempBox() {
      if (this.tempBoxArry.length > 0) {
        // 样式
        let boxList = document.getElementsByClassName("tempMark");
        for (let i = 0; i < boxList.length; i++) {
          boxList[i].style.border = "none";
        }
        let changePot = document.getElementsByClassName("tempMark_changeSize");
        for (let i = 0; i < changePot.length; i++) {
          changePot[i].style.backgroundColor = "transparent";
        }
      }
      document.onkeyup = null;
    },
    tempMarkChange(e) {
      //实现标注框的大小调整
      let body = document.body;
      let index = e.path[0].id.split("tempMark_changeSize")[1];
      // let that = this;
      let item = this.tempBoxArry[index];
      let oldWidth = item.width;
      let newHeight = item.height;
      let disX = e.clientX; //初始的X值
      let disY = e.clientY; //初始的Y值
      body.onmousemove = (e) => {
        //鼠标按下并移动的事件
        //用鼠标的位置减去标注框左上角的位置，得到长宽
        item.flag = false; //禁止移动
        let width = e.clientX - disX + oldWidth;
        let height = e.clientY - disY + newHeight;
        //改变标注框的大小
        if (width >= 50) {
          item.width = width;
        } else {
          item.width = 50;
        }
        if (height >= 50) {
          item.height = height;
        } else {
          item.height = 50;
        }
      };
    },
    tempMarkChange_mouseup(e) {
      let body = document.body;
      body.onmouseup = (e) => {
        body.onmousemove = null;
      };
    },
    editModelShow() {
      this.editProjectModal = true;
      let editProjectInfo = this.projectInfo;
      this.projectEditForm.type = editProjectInfo.type;
      this.projectEditForm.workName = editProjectInfo.workName;
      this.projectEditForm.description = editProjectInfo.description;
      this.projectEditForm.uploaderName = editProjectInfo.uploaderName;
    },
    closeEditModel() {
      this.editProjectModal = false;
    },
    uploadPhoto(e) {
      // 利用fileReader对象获取file
      var file = e.target.files[0];
      var filesize = file.size;
      // 2,621,440   2M
      if (filesize > 2101440) {
        // 图片大于2MB
        this.$Message.error("size > 2MB");
      } else {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
          let formData = new FormData();
          formData.append("picture", file);
          axios
            .post("/GeoProblemSolving/res/image", formData)
            .then((res) => {
              if (res.data.code === 0) {
                this.pictureUrl = res.data.data;
                $("#choosePicture").val("");
              } else {
                this.$Message.error("Upload picture fail!");
              }
            })
            .catch((err) => {
              throw err;
            });
        };
      }
    },
    handleView() {
      this.visible = true;
    },
    handleRemove() {
      this.pictureUrl = "";
    },
    addTag(tag) {
      if (tag != "") {
        this.projectEditForm.editTags.push(tag);
      }
      this.inputTag = "";
    },
    deleteTag(index) {
      this.projectEditForm.editTags.splice(index, 1);
    },
    validateEditProject(form) {
      if (this.projectEditForm.workName != "") {
        this.editProjectSubmit();
      } else {
        this.$Message.error("修改失败，请检查填写的内容！");
      }
    },
    async editProjectSubmit() {
      let form = {
        workName: this.projectEditForm.workName,
        description: this.projectEditForm.description,
        uploaderName: this.projectEditForm.uploaderName,
        id: this.projectInfo.id,
      };
      try {
        let res = await put("/visualResourceLibrary/work", form);
        this.$Message.success("修改成功");
        this.$router.go(0);
      } catch (e) {
        this.$Message.error("修改失败，请重试！");
        console.log(e);
      }
    },
    deleteProjectShow() {
      this.removeProjectModal = true;
    },
    async deleteProject() {
      try {
        let res = await get(
          "/visualResourceLibrary/work/delete/" +
            window.location.href.split("/projectInfo/")[1].split("?content")[0]
        );
        // console.log(res);
        this.$Message.success("删除成功");
        this.$router.push({ name: "projectList" });
      } catch (e) {
        this.$Message.error("删除失败，请重试！");
        console.log(e);
      }
    },
    async commitComment() {
      let commentInfo = {};
      if (this.replyTarget != "" && this.commentValue.indexOf("评论 @") != -1) {
        //回复评论
        let replyTitle = "评论 @" + this.selectCommentInfo.userName;
        if (
          this.commentValue.indexOf(":") != -1 &&
          this.commentValue.split(":")[0] == replyTitle
        ) {
          commentInfo.content = this.commentValue.split(
            "评论 @" + this.selectCommentInfo.userName + ":"
          )[1];
          commentInfo.userName = this.userInfo.name;
          if (commentInfo.content == "") {
            this.$Message.error("请输入评论内容~！");
            return;
          }
          try {
            let res = await post(
              "/visualResourceLibrary/ele/" + this.replyTarget,
              commentInfo
            );
            // console.log(res);
            this.selectCommentInfo.comments.push(
              res.data.data.comments[res.data.data.comments.length - 1]
            );
            this.$Message.success("评论成功");
          } catch (e) {
            this.$Message.error("评论失败");
            console.log(e);
          }
        } else {
          this.replyTarget = "";
          this.$Message.warning("评论失败，请重试！");
        }
      } else {
        //正常评论
        commentInfo.content = this.commentValue;
        if (commentInfo.content == "") {
          this.$Message.error("请输入评论内容~！");
          return;
        }
        commentInfo.userName = this.userInfo.name;
        commentInfo.zoomIn = this.params.zoomVal;
        commentInfo.left = this.params.left;
        commentInfo.top = this.params.top;
        commentInfo.wid = window.location.href
          .split("/projectInfo/")[1]
          .split("?content")[0];
        commentInfo.type = this.commentType;
        commentInfo.tags = JSON.parse(JSON.stringify(this.tempBoxArry));
        // console.log(commentInfo);
        try {
          let res = await post("/visualResourceLibrary/ele", commentInfo);
          // console.log(res);
          this.participants.push(res.data.data);
          this.$Message.success("评论成功");
        } catch (e) {
          this.$Message.error("修改失败");
          console.log(e);
        }
      }
      this.commentValue = "";
      this.tempBoxArry = [];
      this.replyTarget = "";
    },
    commentLiked(id, list) {
      //判断当前用户是否点过赞
      if (
        list.length == 0 ||
        list.toString().indexOf(this.userInfo.userId) == -1
      ) {
        //没有点赞，则点赞
        this.commitCommentLiked(id, this.userInfo.userId);
        list.push(this.userInfo.userId);
      } else {
        //若点过，则取消点赞
        this.commitCommentLiked(id, this.userInfo.userId);
        for (let i = 0; i < list.length; i++) {
          if (list[i] == this.userInfo.userId) {
            list.splice(i, 1);
          }
        }
      }
    },
    async commitCommentLiked(id, userId) {
      try {
        let res = await get(
          "/visualResourceLibrary/ele/likes/" + id + "/" + userId
        );
        // console.log(res);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    async starWork(id) {
      try {
        let res = await get(
          "/visualResourceLibrary/work/likes/" + id + "/" + this.userInfo.userId
        );
        // console.log(res);
        this.projectInfo.likes = res.data.data.likes;
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    //图片位置定位
    imgLocationShow(top, left, zoomVal) {
      var e = document.getElementById("projectImg");

      e.style.left = parseInt(left) + "px";
      e.style.top = parseInt(top) + "px";
      e.style.transform = "scale(" + zoomVal + ")";
    },

    //图片缩放
    bagimg(e) {
      // 禁用滚动条
      let m = window.innerWidth - document.body.clientWidth; //滚动条的宽度
      document.documentElement.style.overflowY = "hidden";
      document.documentElement.style.marginRight = m + "px";
      this.boxArry = [];
      this.commentModalShow = false;
      var e = document.getElementById("projectImg");
      this.params.zoomVal += event.wheelDelta / 1200;
      if (this.params.zoomVal >= 0.2) {
        e.style.transform = "scale(" + this.params.zoomVal + ")";
      } else {
        this.params.zoomVal = 0.2;
        e.style.transform = "scale(" + this.params.zoomVal + ")";
        return false;
      }
    },
    recoverScroll() {
      // 恢复滚动条
      document.documentElement.style.overflowY = "scroll";
      document.documentElement.style.paddingRight = "0px";
      document.documentElement.style.marginRight = "0px";
    },
    getImgCss(e, key) {
      return e.currentStyle
        ? e.currentStyle[key]
        : document.defaultView.getComputedStyle(e, false)[key];
    },
    startDrag(bar, target, callback) {
      let that = this;
      if (that.getImgCss(target, "left") !== "auto") {
        that.params.left = that.getImgCss(target, "left");
      }
      if (that.getImgCss(target, "top") !== "auto") {
        that.params.top = that.getImgCss(target, "top");
      }
      bar.onmousedown = function (event) {
        that.boxArry = [];
        that.commentModalShow = false;
        that.params.flag = true;
        if (!event) {
          event = window.event;
          bar.onselectstart = function () {
            return false;
          };
        }
        let e = event;
        that.params.currentX = e.clientX;
        that.params.currentY = e.clientY;
      };
      document.onmouseup = function () {
        that.params.flag = false;
        if (that.getImgCss(target, "left") !== "auto") {
          that.params.left = that.getImgCss(target, "left");
        }
        if (that.getImgCss(target, "top") !== "auto") {
          that.params.top = that.getImgCss(target, "top");
        }
      };
      document.onmousemove = function (event) {
        let e = event ? event : window.event;
        if (that.params.flag) {
          let nowX = e.clientX,
            nowY = e.clientY;
          let disX = nowX - that.params.currentX,
            disY = nowY - that.params.currentY;
          target.style.left = parseInt(that.params.left) + disX + "px";
          target.style.top = parseInt(that.params.top) + disY + "px";
          if (typeof callback == "function") {
            callback(
              (parseInt(that.params.left) || 0) + disX,
              (parseInt(that.params.top) || 0) + disY
            );
          }
          if (event.preventDefault) {
            event.preventDefault();
          }
          return false;
        }
      };
    },
    startBoxDrag(bar, target, index, callback) {
      let that = this;
      if (that.getImgCss(target, "left") !== "auto") {
        that.tempBoxArry[index].left = that.getImgCss(target, "left");
      }
      if (that.getImgCss(target, "top") !== "auto") {
        that.tempBoxArry[index].top = that.getImgCss(target, "top");
      }
      bar.onmousedown = function (event) {
        that.boxArry = [];
        that.commentModalShow = false;
        that.tempBoxArry[index].flag = true;
        if (!event) {
          event = window.event;
          bar.onselectstart = function () {
            return false;
          };
        }
        let e = event;
        that.tempBoxArry[index].currentX = e.clientX;
        that.tempBoxArry[index].currentY = e.clientY;
      };
      document.onmouseup = function () {
        if (that.tempBoxArry[index] != undefined) {
          that.tempBoxArry[index].flag = false;
          if (that.getImgCss(target, "left") !== "auto") {
            that.tempBoxArry[index].left = that.getImgCss(target, "left");
          }
          if (that.getImgCss(target, "top") !== "auto") {
            that.tempBoxArry[index].top = that.getImgCss(target, "top");
          }
        }
      };
      document.onmousemove = function (event) {
        let e = event ? event : window.event;
        if (that.tempBoxArry[index] != undefined) {
          if (that.tempBoxArry[index].flag) {
            let nowX = e.clientX,
              nowY = e.clientY;
            let disX = nowX - that.tempBoxArry[index].currentX,
              disY = nowY - that.tempBoxArry[index].currentY;
            target.style.left =
              parseInt(that.tempBoxArry[index].left) + disX + "px";
            target.style.top =
              parseInt(that.tempBoxArry[index].top) + disY + "px";
            if (typeof callback == "function") {
              callback(
                (parseInt(that.tempBoxArry[index].left) || 0) + disX,
                (parseInt(that.tempBoxArry[index].top) || 0) + disY
              );
            }
            if (event.preventDefault) {
              event.preventDefault();
            }
            return false;
          }
        }
      };
    },
    back2List() {
      this.$router.push({ name: "projectList" });
    },
  },
  computed: {},
  filters: {
    filterSizeType(value) {
      // 无法处理 i逼近与.99的情况，如1.99.   把精确的位数增加一位，问题初步解决
      if (value === 0) return "0 B";
      let k = 1024;
      let sizes = ["B", "KB", "MB", "GB"];
      let i = Math.floor(Math.log(value) / Math.log(k));
      return (value / Math.pow(k, i)).toPrecision(4) + " " + sizes[i];
    },
    filterTimeStyle(str) {
      if (str != null) {
        let result = str.split(".")[0];
        return result.replace("T", " ");
      }
    },
  },
};
</script>
